<template>
  <div>
    <el-dialog
      title="单位安装统计"
      :visible.sync="dialogVisible"
      width="1000px"
      :before-close="closeEditDialog"
      :close-on-click-modal="false"
      :append-to-body="true"
    >
      <el-table
        :data="orgDevice"
        height="500px"
        :row-class-name="tableRowClassName"
        class="el-table"
      >
        <el-table-column align="center" label="序号" type="index" width="80">
        </el-table-column>
        <el-table-column
          align="center"
          prop="orgName"
          label="机构名称"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="sum"
          label="设备总数"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          align="center"
          :prop="item.count"
          :label="item.lable"
          show-overflow-tooltip
          v-for="(item, i) in name"
          :key="i"
        >
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  props: ["orgDevice"],
  components: {},
  data() {
    return {
      dialogVisible: false,
      name: [
        {
          lable: "22年",
          count: "count22",
        },
        {
          lable: "23年",
          count: "count23",
        },
        {
          lable: "24年",
          count: "count24",
        },
        {
          lable: "25年",
          count: "count25",
        },
        //  {
        //   lable: '26年',
        //   count: "count26"
        // }
      ],
    };
  },
  watch: {},
  computed: {},
  methods: {
    // 点击关闭弹框
    closeEditDialog() {
      this.dialogVisible = false;
    },
    tableRowClassName({ row, rowIndex }) {
      console.log(row, "row");
      console.log(rowIndex, "rowIndex");
      if (rowIndex % 2 == 0) {
        return;
      } else {
        return "success-row";
      }
      return "";
    },
  },
  mounted() {},
  created() {},
};
</script>

<style lang="less" scoped>
// ::v-deep .el-table tr {
//   background-color: none !important;
// }

::v-deep .el-dialog {
  background: #243d83 !important;
  border-radius: 5px;
}

::v-deep .el-dialog__body {
  padding: 15px 30px 30px 30px !important;
}

::v-deep .el-dialog__header .el-dialog__title {
  color: #fff !important;
}
::v-deep .el-dialog__headerbtn .el-dialog__close {
  color: #fff !important;
}

::v-deep .el-table {
  background-color: #243d83;
  /* 自定义背景色 */
  color: #fff;

  tr {
    background-color: #243d83 !important;
  }
}

::v-deep .el-table__header-wrapper th {
  background-color: rgb(35, 59, 122);
  /* 自定义表头背景色 */
  color: #fff;
  background-color: rgba(35, 59, 122, 1);
  background-color: rgb(6, 26, 103);
  color: #7da4ef;
}

::v-deep .el-table__body-wrapper td {
  background-color: #243d83;
  /* 自定义单元格背景色 */
}

// el-table鼠标移入更换整行的背景颜色
::v-deep .el-table tbody tr:hover > td {
  background: #243d83 !important;
}
::v-deep .el-table td.el-table__cell {
  border: none !important;
  color: #7098e4 !important;
}

::v-deep .el-table th.el-table__cell.is-leaf {
  border: none !important;
}

::v-deep .el-table::before {
  height: 0 !important;
}

::v-deep .el-table .warning-row .el-table__cell {
  background: none !important;
}

::v-deep .el-table .success-row .el-table__cell {
  background: rgb(27, 46, 124) !important;
}
</style>
